<template>
	<view>
		
		<!-- 404页面 -->
		<view class="noData" v-if="netWorkType == 'none'"><noData @handle="refresh"></noData></view>
		<view v-if="netWorkType != 'none'">
			
		<view  v-if="!networkStatus">
					<nonetword @onclick="getList"></nonetword>	
		</view>	
		<view v-if="networkStatus" class="content">
			<tui-tips ref="toast"></tui-tips>
			<view class="row">
				<view class="nominal">
					姓名
				</view>
				<view class="input">
					<input placeholder="请输入姓名" type="text" v-model="patient.name" />
				</view>
			</view>
			<view class="row">
				<view class="nominal">
					身份证
				</view>
				<view class="input">
					<input placeholder="请输入身份证" type="text" v-model="patient.id_card" />
				</view>
			</view>
			<view class="row">
				<view class="nominal">
					电话
				</view>
				<view class="input">
					<input placeholder="请输入电话号码" type="text" v-model="patient.tel" />
				</view>
			</view>
			<view class="row">
				<view class="nominal">
					性别
				</view>
				<view class="input">
					<view class="sex" @tap="changSex(1)">男<text class="iconfont" :style="patient.sex==1?'color: #1D86B6;':'' " >&#xe61e;</text></view>
					<view class="sex"  @tap="changSex(0)">女 <text class="iconfont" :style="patient.sex==0?'color: #1D86B6;':'' ">&#xe61e;</text></view>
				</view>
			</view>
			<view class="row">
				<view class="nominal">
					年龄
				</view>
				<view class="input">
					<input placeholder="请输入年龄" type="text" v-model="patient.age" />
				</view>
			</view>
			<view class="row">
				<view class="nominal">
					与本人关系
				</view>
				<view class="input">
					<view>
					
					</view>
					<input placeholder="请填写用药人与本人关系" type="text" v-model="patient.relation" />
				</view>
			</view>
			<view class="row">
				<view class="nominal">
					地址
				</view>
				<picker :value="value" mode="multiSelector" @change="picker" @columnchange="columnPicker" :range="multiArray" >
					<text style="font-size: 24rpx;line-height: 51px;">{{data.text}}</text>
				</picker>
				
			</view>
			<view class="row">
				<view class="nominal">
					详细
				</view>
				<view class="input">
					<input type="textarea" v-model="patient.address" auto-height="true" placeholder="输入详细地址"></input>
				</view>
			</view>
			
			
		</view>
		<view v-if="networkStatus" class="save" @tap="confirm">
			<button class="btn">
				确定
			</button>
		</view>
		
		</view>
		
	</view>
</template>

<script>
	//公共api接口封装方法
	
	import areaData from "@/packageAgent/city.js"
	//获取网络状态
	import { mapGetters } from 'vuex';
	export default {
		components: {
			
		},
		computed: {
			//注册网络状态
			...mapGetters(['netWorkType'])	
		},
		
		data() {
			return {
				selectList:[],
				value: [19,0,0],//已选城市地址
				multiArray: [], //picker数据
				editType:'edit',
				
				id:'',
				detail:'',
				isDefault:false,
				//网络状态
				networkStatus:true,
				patient:{
					id:'',
					name:'',
					tel:'',
					sex:'',
					relation:'',
					id_card:'',
					age:'',
					address:'',
				},
				data:{
					text:'请选择',
					
				},
				columnFirst:null,
				columnsecond:null,
			};
		},
		components: {
			
		},
		onLoad:function(e){
			//获取传递过来的参数	
			// console.log('*****',e)
			if(typeof e.type != "undefined")
			{
				this.editType = e.type;
			}
			if(typeof e.patient_id !='undefined')
			{
				this.id =  e.patient_id
				
			}
			// console.log('*****',this.id)
			if(this.id !=''){
				this.getPatient()
			}
			this.selectList=areaData.area
			if(e.type=='edit'){
				uni.getStorage({
					key:'address',
					success: (e) => {
						this.id = e.data.id;
						this.name = e.data.name;
						this.tel = e.data.tel;
						this.detail = e.data.detail;
						this.isDefault = Boolean(e.data.isDefault);
						this.value = [e.data.province_id,e.data.city_id,e.data.area_id];	
						this.data.text = e.data.province_name+' '+e.data.city_name+' '+e.data.area_name;						
					}
				})
			}
			
			this.multiArray = [
				this.toArr(this.selectList,1),
				this.toArr(this.selectList[19].children,2),
				this.toArr(this.selectList[19].children[0].children,3)
			]
			
		},
		onShow:function(){
			
			
		},
		methods: {
			// 刷新的方法
			refresh(){
			    this.getList()        
			},
			onBack() {
			  uni.navigateBack();
			},
			changSex(v){
				this.patient.sex =v;
				console.log(this.sex)
			},
			getPatient(){
				const _this = this
				
				
				//初始页面数据
				
				var opt={
					url:'/Patient/getDetail',
					data:{
						id:_this.id,						
					},
					success:function(res){
						//console.log(res)
						if(res.status==1){
							_this.patient = res.data.detail
						}else{
							uni.showToast({
								icon:'none',
								title:res.message
							});
						}
											
					}
				};
				_this.$service.GetApi(opt)
			},
			confirm(){
				const _this = this
				let value = this.value
				//初始页面数据
				let url = '/Patient/add';
				if(_this.editType == 'edit'){
					
					url = '/Patient/edit';
				}
				let data={
						id:_this.id,
						name:_this.patient.name,
						tel:_this.patient.tel,
						sex:_this.patient.sex,
						relation:_this.patient.relation,
						id_card:_this.patient.id_card,
						age:_this.patient.age,
						address:_this.patient.address
					}
				if(JSON.stringify(this.value) !== '[]')
				{
					
					data.province_id=value[0]
					data.city_id=value[1]
					data.area_id=value[2]
					data.province_name=this.selectList[value[0]].label
					data.city_name=this.selectList[value[0]].children[value[1]].label
					data.area_name=this.selectList[value[0]].children[value[1]].children[value[2]].label
				}
				
				var opt={
					url:url,
					data:data,
					success:function(res){
						//console.log(res)
						if(res.status==1){
							uni.showToast({
								icon:'none',
								title:'操作成功'
							});
							setTimeout(function() {
								_this.onBack()
							}, 3000);
						}else{
							uni.showToast({
								icon:'none',
								title:res.message
							});
						}
											
					}
				};
				_this.$service.GetApi(opt)
				 if(_this.networkStatus)
				 {  
					 uni.hideLoading();
				 } 
			},	
			isDefaultChange(e){
				this.isDefault = e.detail.value;
			},
			del(){
				uni.showModal({
					title: '删除提示',
					content: '你将删除这个收货地址',
					success: (res)=>{
						if (res.confirm) {
							var _this = this
												
							var opt={
								url:'/address/del',
								data:{
									id:_this.id
								},
								success:function(res){
									//console.log(res)
									if(res.status==1){
											   
										 let options = {
										 	msg: res.message,
										 	type:'green'
										 };
										  _this.$refs.toast.showTips(options);
											
										setTimeout(function(){
											uni.navigateBack();
										},1500)
									}else{
										let options = {
											msg: res.message,
											type:'danger'
										};
										 _this.$refs.toast.showTips(options);
									}
														
								}
							};
							_this.$service.GetApi(opt)
						
						} else if (res.cancel) {
							//console.log('用户点击取消');
						}
					}
				});
				
			},
			save(){
				let _this = this
				let value = this.value
				let data={
					name:this.name,
					head:this.name.substr(0,1),
					tel:this.tel,
					address:this.data.address,
					detail:this.detail,
					// isDefault:this.isDefault,					
					editType:this.editType
				}
				if(JSON.stringify(this.value) !== '[]')
				{
					data.province_id=value[0]
					data.city_id=value[1]
					data.area_id=value[2]
					data.province_name=this.selectList[value[0]].label
					data.city_name=this.selectList[value[0]].children[value[1]].label
					data.area_name=this.selectList[value[0]].children[value[1]].children[value[2]].label
				}
					
				if(this.editType=='edit'){
					data.id = this.id
				}
				if(!data.name){
					uni.showToast({title:'请输入收货人姓名',icon:'none'});
					return ;
				}
				if(!data.tel){
					uni.showToast({title:'请输入收货人电话号码',icon:'none'});
					return ;
				}
				if(!data.detail){
					uni.showToast({title:'请输入收货人详细地址',icon:'none'});
					return ;
				}
				
				//实际应用中请提交ajax,模板定时器模拟提交效果
					var opt={
						url:'/user/addFamily',
						data:data,
						success:function(res){
							//console.log(res)
							if(res.status==1){
								uni.hideLoading();			     
								 let options = {
								 	msg: res.message,
								 	type:'green'
								 };
								
								  _this.$refs.toast.showTips(options);
								
								setTimeout(function(){
									
									uni.navigateBack();
								},1500)
								//_this.data.address = res.data.address
							}else{
								let options = {
									msg: res.message,
									type:'danger'
								};
								 _this.$refs.toast.showTips(options);
							}
												
						}
					};
					_this.$service.GetApi(opt)
	
			},
			picker: function(e) {
				let value = e.detail.value;
				
				//console.log(value)
				if (this.selectList.length > 0) {
					
					let provice = this.selectList[value[0]].label
					console.log(this.selectList[value[0]])
					let city = this.selectList[value[0]].children[value[1]].label
					let area = this.selectList[value[0]].children[value[1]].children[value[2]].label
					this.data.text = provice + " " + city + " " + area;
					this.value = [value[0],value[1],value[2]]
					//this.id = this.selectList[value[0]].children[value[1]].children[value[2]].id
				}
			},
			columnPicker: function(e) {
				//第几列 下标从0开始
				let column = e.detail.column;
				//第几行 下标从0开始
				let value = e.detail.value;
				
				if (column === 0) {
					console.log(value)
					console.log(column)
					this.multiArray = [
						this.multiArray[0],
						this.toArr(this.selectList[value].children,2),
						this.toArr(this.selectList[value].children[0].children,3)
					];
					this.columnFirst=value;
					 this.value = [value, 0, 0]
				} else if (column === 1) {
					
					this.multiArray = [
						this.multiArray[0],
						this.multiArray[1],
						this.toArr(this.selectList[this.columnFirst].children[value].children,3)
					];
					this.columnsecond=value;
					this.value = [this.value[0], value, 0]
				}
				
				//console.log(this.value)
			},
			toArr(object,column=1) {
				let arr = [];
				console.log(object)
				for (let i in object) {
					if(column==1)
					{
						arr.push(object[i].label);
					}
					if(column==2)
					{
						arr.push(object[i].label);
					}
					if(column==3)
					{
						arr.push(object[i].label);
					}	
				
				}
				return arr;
			},
			
		},
		
		
	};
</script>
<style lang="scss">
@import "./add.scss";
	
</style>
